<template>
  <div class="date-time-group" :class="getIndentClass(modelValue.alignment)">
    <!-- 字段名称 -->
    <div class="field-name-container">
      <span v-if="modelValue.prefixSymbol && modelValue.prefixSymbol !== 'none'" class="prefix-symbol">
        {{ getPrefixSymbol() }}
      </span>
      <el-input 
        v-model="modelValue.fieldName" 
        placeholder="字段名称"
        class="field-name-input"
        :class="{ 'bold-text': modelValue.isBold }"
        :style="{ width: getFieldNameWidth() }"
        @input="updateFieldName"
        @change="handleFieldNameChange"
      />
    </div>
    

    
    <!-- 时间显示区域 -->
    <div class="time-display-container">
      <div class="input-group">
      <!-- 年份 -->
      <template v-if="showYear">
        <el-input-number 
          v-model="modelValue.year" 
          :min="1900" 
          :max="2100" 
          controls-position="right"
          class="year-input"
          placeholder="年"
          @change="updateYear"
        />
        <span class="text-segment">年</span>
      </template>
      
      <!-- 月份 -->
      <template v-if="showMonth">
        <el-input-number 
          v-model="modelValue.month" 
          :min="1" 
          :max="12" 
          controls-position="right"
          class="month-input"
          placeholder="月"
          @change="updateMonth"
        />
        <span class="text-segment">月</span>
      </template>
      
      <!-- 日期 -->
      <template v-if="showDay">
        <el-input-number 
          v-model="modelValue.day" 
          :min="1" 
          :max="31" 
          controls-position="right"
          class="day-input"
          placeholder="日"
          @change="updateDay"
        />
        <span class="text-segment">日</span>
      </template>
      
      <!-- 小时 -->
      <template v-if="showHour">
        <el-input-number 
          v-model="modelValue.hour" 
          :min="0" 
          :max="23" 
          controls-position="right"
          class="hour-input"
          placeholder="时"
          @change="updateHour"
        />
        <span class="text-segment">时</span>
      </template>
      
      <!-- 分钟 -->
      <template v-if="showMinute">
        <el-input-number 
          v-model="modelValue.minute" 
          :min="0" 
          :max="59" 
          controls-position="right"
          class="minute-input"
          placeholder="分"
          @change="updateMinute"
        />
        <span class="text-segment">分</span>
      </template>
      
      <!-- 秒 -->
      <template v-if="showSecond">
        <el-input-number 
          v-model="modelValue.second" 
          :min="0" 
          :max="59" 
          controls-position="right"
          class="second-input"
          placeholder="秒"
          @change="updateSecond"
        />
        <span class="text-segment">秒</span>
      </template>
      
      <!-- 毫秒 -->
      <template v-if="showMillisecond">
        <el-input-number 
          v-model="modelValue.millisecond" 
          :min="0" 
          :max="999" 
          controls-position="right"
          class="millisecond-input"
          placeholder="毫秒"
          @change="updateMillisecond"
        />
        <span class="text-segment">毫秒</span>
      </template>
      
      <!-- 后缀 -->
        <el-input 
          v-if="modelValue.suffix !== undefined" 
          v-model="modelValue.suffix" 
          class="field-name-input suffix-input"
          placeholder="后缀"
          @input="updateSuffix"
           :style="{ width: getSuffixWidth() }"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  modelValue: {
    type: Object,
    required: true
  },
  suffix: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['update:modelValue'])

// 计算属性：根据格式显示对应的输入框
const showYear = computed(() => {
  return props.modelValue.dateFormat?.includes('yyyy') || false
})

const showMonth = computed(() => {
  // 当格式中包含 'mm' 但不包含 'hh' 时，认为是月份
  return props.modelValue.dateFormat?.includes('mm') && !props.modelValue.dateFormat?.includes('hh')
})

const showDay = computed(() => {
  return props.modelValue.dateFormat?.includes('dd') || false
})

const showHour = computed(() => {
  return props.modelValue.dateFormat?.includes('hh') || false
})

const showMinute = computed(() => {
  // 当格式中包含 'mm' 且包含 'hh' 时，认为是分钟
  return props.modelValue.dateFormat?.includes('mm') && props.modelValue.dateFormat?.includes('hh')
})

const showSecond = computed(() => {
  return props.modelValue.dateFormat?.includes('ss') || false
})

const showMillisecond = computed(() => {
  return props.modelValue.dateFormat?.includes('SSS') || false
})

// 更新字段名称
const updateFieldName = (value) => {
  emit('update:modelValue', {
    ...props.modelValue,
    fieldName: value
  })
}

// 更新日期格式
const updateDateFormat = (value) => {
  emit('update:modelValue', {
    ...props.modelValue,
    dateFormat: value
  })
}



// 更新年份
const updateYear = (value) => {
  emit('update:modelValue', {
    ...props.modelValue,
    year: value
  })
}

// 更新月份
const updateMonth = (value) => {
  emit('update:modelValue', {
    ...props.modelValue,
    month: value
  })
}

// 更新日期
const updateDay = (value) => {
  emit('update:modelValue', {
    ...props.modelValue,
    day: value
  })
}

// 更新小时
const updateHour = (value) => {
  emit('update:modelValue', {
    ...props.modelValue,
    hour: value
  })
}

// 更新分钟
const updateMinute = (value) => {
  emit('update:modelValue', {
    ...props.modelValue,
    minute: value
  })
}

// 更新秒
const updateSecond = (value) => {
  emit('update:modelValue', {
    ...props.modelValue,
    second: value
  })
}

// 更新毫秒
const updateMillisecond = (value) => {
  emit('update:modelValue', {
    ...props.modelValue,
    millisecond: value
  });
};

const updateSuffix = (value) => {
  emit('update:modelValue', {
    ...props.modelValue,
    suffix: value
  });
};

// 获取缩进类
const getIndentClass = (alignment) => {
  const indentMap = {
    'indent-0': 'indent-0',
    'indent-1': 'indent-1',
    'indent-2': 'indent-2',
    'indent-3': 'indent-3',
    'indent-4': 'indent-4',
    'indent-5': 'indent-5'
  }
  return indentMap[alignment] || 'indent-0'
}

// 获取前缀符号
const getPrefixSymbol = () => {
  const symbolMap = {
    'dot_circle': '⏺',
    'star': '✧',
    'pointer': '☞',
    'arrow_curved': '⮚',
    'square': '⯀',
    // backward compatibility
    'triangle': '▶',
    'dot': '●',
    'wing_triangle': '▶',
    'wing_dot': '●'
  }
  return symbolMap[props.modelValue.prefixSymbol] || ''
}

// 计算文本宽度
const getTextWidth = (text, fontSize = '14px', fontFamily = 'Arial') => {
  const canvas = document.createElement('canvas')
  const context = canvas.getContext('2d')
  context.font = `${fontSize} ${fontFamily}`
  return context.measureText(text).width
}

// 获取字段名称宽度
const getFieldNameWidth = () => {
  const text = props.modelValue.fieldName || '字段名称'
  const width = getTextWidth(text, '14px', 'Arial')
  return `${Math.max(width + 20, 60)}px` // 最小60px，加20px内边距
}

// 获取后缀宽度
const getSuffixWidth = () => {
  const text = props.modelValue.suffix || '后缀'
  const width = getTextWidth(text, '14px', 'Arial')
  return `${Math.max(width + 20, 60)}px` // 最小60px，加20px内边距
}

const handleFieldNameChange = () => {
  // trim 去除空格
  props.modelValue.fieldName = props.modelValue.fieldName.trim();
};
</script>

<style lang="scss" scoped>
@import '@/assets/common-styles.scss';

.date-time-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  
  .time-display-container {
    flex: 1;
    display: flex;
    
    .input-group {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: nowrap;
    }
  }
  
  .year-input {
    width: 100px;
  }
  
  .month-input,
  .day-input {
    width: 80px;
  }
  
  .hour-input,
  .minute-input,
  .second-input {
    width: 70px;
  }
  
  .millisecond-input {
    width: 90px;
  }

  .suffix-input {
    width: 80px;
  }
}
</style> 